<template>
  <div>
    <div class="container">
     <div class="width:1020px">
        <span class="go-back" @click="back">返回</span>
        <span class="className">当前位置：{{name}}</span>
     </div>
      <div class="classBox">
        <ul v-for="item in classList2" :key="item">
          <li>
            <i class="el-icon-tickets icon"></i>
            <span class="classList">{{item.name}}</span>
            <span class="exsc" @click="goTest(item)">练习</span>
          </li>
        </ul>
      </div>
      <div class="classBox2">
        <ul v-for="item in classList" :key="item">
          <li>
            <i class="el-icon-tickets" style="float:left"></i>
            <span class="classList">{{item}}</span>
            <span class="exsc">练习</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      name: "",
     
      classList: ["圆柱圆锥", "圆柱体积", "解比例", "比例尺"],
      classList2: [
          {
              name:'口算加法',
              to:'/grade4-exe'
          },
           {
              name:'随机加减',
              to:'/grade4-exe2'
          },
          {
              name:'小数乘整数',
              to:'/grade4-exe3'
          }
      ]
      
    };
  },
//    props: {
//           classList: {
//               type: Array,
//             //   default: function(){
//             //       return [];
//             //   }
//             default:["圆柱圆锥", "圆柱体积", "解比例", "比例尺"]
//           },
//       },
  computed: {},
  watch: {},
  methods: {
    goTest(item){
      console.log(item);
      this.$router.push({path:item.to,query:{name:item.name}})
    },
    back(){
      this.$router.go(-1)
    }
  },
  created() {
    this.name = this.$route.query.name;
  }
};
</script>
<style lang='scss' scoped>
.go-back{
  font-size: 25px;
}
li {
  list-style-type: none;
  height: 31px;
  line-height: 31px;
  // padding: 10px;
}
.container {
  margin: 0 auto;
  width: 1020px;
}
.className {
  font-size: 24px;
  font-family: "微软雅黑";
  text-align: center;
}
.webName {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
.classBox {
  float: left;
  width: 497px;
  border: 4px solid yellow;
  border-radius: 8px;
}
.classBox2 {
  float: right;
  width: 497px;
  border: 4px solid yellow;
  border-radius: 8px;
}
.classList {
  float: left;
}
.exsc {
  float: right;
  text-align: center;
  width: 88px;
  height: 31px;
  line-height: 31px;
  background: #e77200;
  border-radius: 20px;
  cursor: pointer;
}
.el-icon-tickets {
  float: left;
  margin-top:6px ;
}
</style>